<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  <meta http-equiv="Expires" content="0" />
</head>

<body style="width: 100%; height: 100%; overflow: hidden">
  <div style="width: 100%">
    <div>
      <fieldset class="ptz">
        <legend style="font-size: 14px;">云台操作</legend>
        <table cellpadding="0" cellspacing="3" border="0" class="left">
          <tbody>
            <tr>
              <td>
                <input type="button" class="btn" value="左上" onmousedown="mouseDownPTZControl(5);"
                  onmouseup="mouseUpPTZControl();" />
                <input type="button" class="btn" value="上" onmousedown="mouseDownPTZControl(1);"
                  onmouseup="mouseUpPTZControl();" />
                <input type="button" class="btn" value="右上" onmousedown="mouseDownPTZControl(7);"
                  onmouseup="mouseUpPTZControl();" />
              </td>
            </tr>
            <tr>
              <td>
                <input type="button" class="btn" value="左" onmousedown="mouseDownPTZControl(3);"
                  onmouseup="mouseUpPTZControl();" />
                <input type="button" class="btn" value="自动" onclick="mouseDownPTZControl(9);" />
                <input type="button" class="btn" value="右" onmousedown="mouseDownPTZControl(4);"
                  onmouseup="mouseUpPTZControl();" />
              </td>
            </tr>
            <tr>
              <td>
                <input type="button" class="btn" value="左下" onmousedown="mouseDownPTZControl(6);"
                  onmouseup="mouseUpPTZControl();" />
                <input type="button" class="btn" value="下" onmousedown="mouseDownPTZControl(2);"
                  onmouseup="mouseUpPTZControl();" />
                <input type="button" class="btn" value="右下" onmousedown="mouseDownPTZControl(8);"
                  onmouseup="mouseUpPTZControl();" />
              </td>
            </tr>
          </tbody>
        </table>
        <table cellpadding="0" cellspacing="3" border="0" class="left">
          <tbody>
            <tr>
              <td class="tt">云台速度</td>
              <td>
                <select id="ptzspeed" class="sel">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4" selected="">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                </select>
                <input type="button" class="btn" value="设置" onclick="clickSetPreset();" />
              </td>
            </tr>
            <tr>
              <td class="tt">预置点号</td>
              <td><input id="preset" type="text" class="txt" value="1" /><input type="button" style="margin-left: 5px;"
                  class="btn" value="调用" onclick="clickGoPreset();" /></td>
            </tr>
          </tbody>
        </table>
        <table cellpadding="0" cellspacing="3" border="0" class="left">
          <tbody>
            <tr>
              <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="PTZZoomIn()"
                  onmouseup="PTZZoomStop()" /></td>
              <td style="padding-left: 21px;"><input type="button" class="btn2" value="变倍-" onmousedown="PTZZoomout()"
                  onmouseup="PTZZoomStop()" /></td>
            </tr>
            <tr>
              <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="PTZFocusIn()"
                  onmouseup="PTZFoucusStop()" /></td>
              <td style="padding-left: 21px;"><input type="button" class="btn2" value="变焦-" onmousedown="PTZFoucusOut()"
                  onmouseup="PTZFoucusStop()" /></td>
            </tr>
            <tr>
              <td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="PTZIrisIn()"
                  onmouseup="PTZIrisStop()" /></td>
              <td style="padding-left: 21px;"><input type="button" class="btn2" value="光圈-" onmousedown="PTZIrisOut()"
                  onmouseup="PTZIrisStop()" /></td>
            </tr>
            <tr>
              <td class="tt" colspan="2"><input type="button" class="btn2" value="抓图" onclick="clickCapturePicData();">
              </td>
            </tr>
          </tbody>
        </table>
      </fieldset>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; width: 100%">
      <div id="divPlugin" style="position: relative; width: 1150px; height: 780px; left: 550px; top: -160px"></div>
    </div>
  </div>
</body>
<script src="./jquery-1.7.1.min.js"></script>
<script id="videonode" src="./webVideoCtrl.js"></script>
<script>
  // 初始化插件

  // 全局保存当前选中窗口
  var g_iWndIndex = 0 //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  var g_oLocalConfig = null //本地配置

  //错误码
  //通用错误
  var ERROR_CODE_UNKNOWN = 1000 //未知错误
  var ERROR_CODE_NETWORKERROR = 1001 //网络错误
  var ERROR_CODE_PARAMERROR = 1002 //缺少插件元素

  //登录模块
  var ERROR_CODE_LOGIN_NOLOGIN = 2000 // 未登录
  var ERROR_CODE_LOGIN_REPEATLOGIN = 2001 //设备已登录，重复登录
  var ERROR_CODE_LOGIN_NOSUPPORT = 2002 //当前设备不支持Digest登录

  //预览播放
  var ERROR_CODE_PLAY_PLUGININITFAIL = 3000 //插件初始化失败
  var ERROR_CODE_PLAY_NOREPEATPLAY = 3001 //当前窗口已经在预览
  var ERROR_CODE_PLAY_PLAYBACKABNORMAL = 3002 //回放异常
  var ERROR_CODE_PLAY_PLAYBACKSTOP = 3003 //回放停止
  var ERROR_CODE_PLAY_NOFREESPACE = 3004 //录像过程中，硬盘容量不足

  //对讲
  var ERROR_CODE_TALK_FAIL = 5000 //语音对讲失败

  var version = 'V3.3.0build20230322'
  $(function () {
    var params = {}
    if (window.location.search) {
      var parts = window.location.search.substring(1).split('&')
      for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=')
        if (!nv[0]) continue
        params[nv[0]] = nv[1] || true
      }
    }
    var currentId = params.id
    var rc = params.rc
    if(rc == "false"){
      $(".ptz").hide();
      $("#divPlugin").attr("style","position: relative; width: 1150px; height: 780px; left: 450px; top: 110px");
    }
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin({
      bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
      iWndowType: 1,
      cbSelWnd: function (xmlDoc) {
        g_iWndIndex = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10)
        var szInfo = '当前选择的窗口编号：' + g_iWndIndex
        showCBInfo(szInfo)
      },
      cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
        var szInfo = '当前放大的窗口编号：' + iWndIndex
        if (!bFullScreen) {
          szInfo = '当前还原的窗口编号：' + iWndIndex
        }
        showCBInfo(szInfo)
      },
      cbEvent: function (iEventType, iParam1, iParam2) {
        if (2 == iEventType) {
          // 回放正常结束
          showCBInfo('窗口' + iParam1 + '回放结束！')
        } else if (-1 == iEventType) {
          showCBInfo('设备' + iParam1 + '网络错误！')
        } else if (3001 == iEventType) {
          clickStopRecord(g_szRecordType, iParam1)
        }
      },
      cbInitPluginComplete: function () {
        WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(
          () => {
            console.log(currentId)
            clickStartRealPlay()
            WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
              if (bFlag) {
                alert('检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！')
              }
            })
          },
          () => {
            alert('插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！')
          },
        )
      },
    })
    function clickStartRealPlay() {
      var ipselectData = params.id
      var ipdata = ipselectData.split('_')
      var szIP = ipdata[0]
      var ipAndPort = szIP.split(':')
      var rtspPort = ipdata[1]
      var currentIp = ipAndPort[0]
      var currentPort = ipAndPort[1]
      var szPort = currentPort,
        szUsername = 'admin',
        szPassword = '123456789a'
      var szDeviceIdentify = currentIp + '_' + currentPort
      WebVideoCtrl.I_Login(currentIp, 1, szPort, szUsername, szPassword, {
        timeout: 3000,
        success: function (xmlDoc) {
          show2(2, szDeviceIdentify, rtspPort)
        },
        error: function (oError) {
          show2(2, szDeviceIdentify, rtspPort)
        },
      })
    }

    function show2(iChannelID, szDeviceIdentify, rtspPort) {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        iRtspPort = rtspPort,
        iChannelID = parseInt(iChannelID, 10),
        bZeroChannel = false,
        szInfo = ''
      var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iStreamType: 1,
          iChannelID: iChannelID,
          bZeroChannel: bZeroChannel,
          success: function () {
            szInfo = '开始预览成功！'
            // showOPInfo(szDeviceIdentify + " " + szInfo);
          },
          error: function (oError) {
            // showOPInfo(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);
          },
        })
      }

      if (oWndInfo != null) {
        // 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
          success: function () {
            startRealPlay()
          },
        })
      } else {
        startRealPlay()
      }
    }
  })
  var g_bPTZAuto = false
  function mouseDownPTZControl(iPTZIndex) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      bZeroChannel = false,
      iPTZSpeed = $('#ptzspeed').val()

    if (bZeroChannel) {
      // 零通道不支持云台
      return
    }

    if (oWndInfo != null) {
      if (9 == iPTZIndex && g_bPTZAuto) {
        iPTZSpeed = 0 // 自动开启后，速度置为0可以关闭自动
      } else {
        g_bPTZAuto = false // 点击其他方向，自动肯定会被关闭
      }

      WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
        iPTZSpeed: iPTZSpeed,
        success: function (xmlDoc) {
          if (9 == iPTZIndex && g_bPTZAuto) {
            showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台成功！')
          } else {
            showOPInfo(oWndInfo.szDeviceIdentify + ' 开启云台成功！')
          }
          if (9 == iPTZIndex) {
            g_bPTZAuto = !g_bPTZAuto
          }
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 开启云台失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  // 方向PTZ停止
  function mouseUpPTZControl() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(1, true, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  // 设置预置点
  function clickSetPreset() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iPresetID = parseInt($('#preset').val(), 10)

    if (oWndInfo != null) {
      WebVideoCtrl.I_SetPreset(iPresetID, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 设置预置点成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 设置预置点失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  // 调用预置点
  function clickGoPreset() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iPresetID = parseInt($('#preset').val(), 10)

    if (oWndInfo != null) {
      WebVideoCtrl.I_GoPreset(iPresetID, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调用预置点成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调用预置点失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }
  function PTZZoomIn() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(10, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦+成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  调焦+失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZZoomout() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(11, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦-成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  调焦-失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZZoomStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(11, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦停止成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  调焦停止失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZFocusIn() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(12, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦+成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  聚焦+失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZFoucusOut() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(13, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦-成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  聚焦-失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZFoucusStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(12, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦停止成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  聚焦停止失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZIrisIn() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(14, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 光圈+成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  光圈+失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZIrisOut() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(15, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 光圈-成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  光圈-失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  function PTZIrisStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(14, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 光圈停止成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  光圈停止失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }
  // 抓图
  function clickCapturePicData() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";
    if (oWndInfo != null) {
      WebVideoCtrl.I_CapturePicData().then(function (data) {
        console.log(data);
        szInfo = "抓图上传成功！";
        showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);

        var link = document.createElement('a');
        link.href = "data:image/jpeg;base64," + data;;
        link.download = "image.jpg";

        // 触发点击事件以保存图像
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }, function () {
        szInfo = "抓图失败！";
        showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
      });
    }
  }
  function showOPInfo(szInfo, status, xmlDoc) {
    var szTip = "<div>" + szInfo;
    if (typeof status != "undefined" && status != 200) {
      var szStatusString = $(xmlDoc).find("statusString").eq(0).text();
      var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text();
      if ("" === szSubStatusCode) {
        if ("" === szSubStatusCode && "" === szStatusString) {
          szTip += "(" + status + ")";
        }
        else {
          szTip += "(" + status + ", " + szStatusString + ")";
        }
      } else {
        szTip += "(" + status + ", " + szSubStatusCode + ")";
      }
    }
    szTip += "</div>";

    console.log(szTip);
  }

// 显示操作信息

// 设置本地参数

// 窗口分割数

// 登录

</script>

</html>
<style>
  .ptz {
    width: 155px;
    /* padding: 10px; */
    margin-left: 10px;
    border: 1px solid #7f9db9;
  }

  .ptz .tt {
    width: 48px;
    font-size: 12px;
  }

  .ptz .txt {
    width: 35px;
  }

  .ptz .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .ptz .btn2 {
    width: 60px;
    height: 22px;
    line-height: 18px;
  }

  .ptz .sel {
    width: 43px;
  }
</style>